<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-10-26 13:39:03
 * @LastEditors: lhr
 * @LastEditTime: 2020-10-30 16:52:44
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        margin: 30px 0 10px 0;
      }
      button {
        border: 1px solid #59aaec;
        padding: 5px;
        background: #fff;
        border-radius: 5px;
        color: #59aaec;
      }

      input[type="text"],
      input[type="password"] {
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        border: 1px solid #aaa;
        padding: 0 5px;
      }
    </style>
  </head>
  <body>
    <p>get请求</p>
    <div>
      <input type="text" id="pId" />
      <button type="button" onclick="getDetail()">get请求</button>
    </div>
    <script>
      function getDetail() {
        var id = document.getElementById("pId").value;
        fetch("http://localhost:3000/detail?id=" + id)
          .then(function (res) {
            if (res.ok) {
              return res.json();
            }
            throw new Error(res);
          })
          .then((myJson) => {
            console.log("getDetail ok", myJson);
          })
          .catch((err) => {
            debugger;
            console.log("getDetail error", err);
          });
      }
    </script>

    <p>post请求</p>
    <form name="loginForm">
      <input type="text" placeholder="用户名" name="username" />
      <input type="password" placeholder="密码" name="password" />
      <input type="file" placeholder="头像" name="photo" />
      <div style="margin-top: 20px;">
        <button type="button" onclick="login()">
          post请求 - text/plain
        </button>
        <button
          type="button"
          onclick="login('application/x-www-form-urlencoded')"
        >
          post请求 - application/x-www-form-urlencoded
        </button>
        <button type="button" onclick="login('application/json',true)">
          post请求 - application/json
        </button>
        <button type="button" onclick="login('multripart/form-data')">
          post请求 - multripart/form-data 文件上传
        </button>
        <button
          type="button"
          onclick="login('application/json',true,'loginCookie','','same-origin')"
        >
          post请求 - 包含凭证(Cookie)
        </button>
        <button
          type="button"
          onclick="login('application/json',true,'loginCookie','','omit')"
        >
          post请求 - 不包含凭证(Cookie)
        </button>
      </div>
    </form>

    <script>
      function login(
        ct = "text/plain",
        isJSON = false,
        path = "login0",
        token = "",
        useCookie
      ) {
        var postData;
        if (isJSON) {
          postData = JSON.stringify({
            username: loginForm.username.value,
            password: loginForm.password.value,
          });
        } else if (ct === "multripart/form-data") {
          postData = new FormData();
          postData.append("username", loginForm.username.value);
          postData.append("password", loginForm.password.value);
          postData.append("photo", loginForm.photo.files[0]);
        } else {
          postData = `username=${loginForm.username.value}&password=${loginForm.password.value}`;
        }
        var headers = {
          "Content-Type": ct,
        };
        if (useCookie) {
          headers.Credentials = useCookie; // 都是同源的时候omit貌似不管用
        }
        fetch("http://localhost:3000/" + path, {
          method: "POST",
          headers,
          body: postData,
        })
          .then(function (res) {
            if (res.ok) {
              return res.json();
            }
            throw new Error(res);
          })
          .then((myJson) => {
            console.log("getDetail ok", myJson);
          })
          .catch((err) => {
            console.log("getDetail error", err);
          });
      }
    </script>
  </body>
</html>
